<template>
  <el-card class="moment-item">
    <div class="moment-item-header">
      <router-link :to="`/dashboard/user-moment/${moment.userId}`" class="user-id">
        用户 ID: {{ moment.userId }}
      </router-link>
      <span class="time">{{ moment.created }}</span>
    </div>
    <div class="moment-item-content">
      <p>{{ moment.content }}</p>
      <img v-if="moment.image" :src="moment.image" class="moment-image">
    </div>
    <div class="moment-item-footer">
      <div class="action-buttons">
        <el-button type="text" @click="handleLike" :class="{ 'liked': isLiked }">
          <i class="el-icon-star-off"></i> 点赞 ({{ likeCount }})
        </el-button>
        <el-button type="text" @click="toggleCommentSection">
          <i class="el-icon-chat-line-round"></i> 评论 ({{ commentCount }})
        </el-button>
        <el-button type="text" v-if="moment.userId === currentUserId" @click="handleDelete">
          <i class="el-icon-delete"></i> 删除
        </el-button>
      </div>
      
      <div v-if="showComments" class="comment-section">
        <el-input 
          v-model="commentText" 
          placeholder="写评论..." 
          class="comment-input"
          @keyup.enter.native="submitComment">
          <el-button slot="append" icon="el-icon-s-promotion" @click="submitComment"></el-button>
        </el-input>
        
        <div class="comment-list" v-if="comments && comments.length > 0">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <span class="comment-user">用户{{ comment.userId }}:</span>
            <span class="comment-content">{{ comment.content }}</span>
            <span class="comment-time">{{ comment.created }}</span>
            <el-button 
              v-if="comment.userId === currentUserId" 
              type="text" 
              class="delete-comment" 
              @click="handleDeleteComment(comment.id)">
              <i class="el-icon-close"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'MomentItem',
  props: {
    moment: {
      type: Object,
      required: true
    },
    likeCount: {
      type: Number,
      default: 0
    },
    commentCount: {
      type: Number,
      default: 0
    },
    comments: {
      type: Array,
      default: () => []
    },
    isLiked: {
      type: Boolean,
      default: false
    },
    currentUserId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      showComments: false,
      commentText: ''
    }
  },
  methods: {
    handleLike() {
      this.$emit('like', this.moment);
    },
    toggleCommentSection() {
      this.showComments = !this.showComments;
    },
    handleDelete() {
      this.$emit('delete', this.moment.id);
    },
    submitComment() {
      if (!this.commentText || !this.commentText.trim()) {
        this.$message.warning('评论内容不能为空');
        return;
      }
      
      this.$emit('comment', {
        momentId: this.moment.id,
        content: this.commentText.trim()
      });
      this.commentText = '';
    },
    handleDeleteComment(commentId) {
      this.$emit('delete-comment', {
        commentId,
        momentId: this.moment.id
      });
    }
  }
}
</script>

<style scoped>
.moment-item {
  margin-bottom: 20px;
}

.moment-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.moment-item-content {
  margin-bottom: 15px;
}

.moment-item-content p {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}

.moment-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
}

.moment-item-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.liked {
  color: #409EFF;
}

.comment-section {
  margin-top: 15px;
  border-top: 1px solid #f5f5f5;
  padding-top: 10px;
}

.comment-input {
  margin-bottom: 10px;
}

.comment-list {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
}

.comment-item {
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  font-size: 14px;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-user {
  font-weight: bold;
  margin-right: 8px;
}

.comment-time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.delete-comment {
  position: absolute;
  right: 0;
  top: 5px;
  padding: 0;
  font-size: 12px;
}
</style> 